/*
  学习目标：兄弟组件通信= 让老婆能够花老公的钱
  状态提升： 将子组件内的状态， 提升到共同的父组件中
  目的： 可以借助于子传父、父传子，实现兄弟组件通信
*/

import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  // 1. state提升到父组件中
  state = {
    money: 0,
  };

  // 2.
  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 5. 定义函数钱的函数
  handleCost = () => {
    this.setState({ money: this.state.money - 5000 });
  };

  render() {
    const { money } = this.state;
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：{money}</h1>
        {/* 3. 父传子传递money给子组件 */}
        <Husband handleMakeMoney={this.handleMakeMoney} money={money}></Husband>
        <hr />
        <Wife
          // 6. 通过Props传递函数给wife组件

          handleCost={this.handleCost}
        ></Wife>
      </div>
    );
  }
}
